<template>
  <view class="share_layout_box">
    <canvas class="myCanvas test" :style="'width:'+myCanvasWidth+'px;height:'+myCanvasHeight+'px'" canvas-id="inviteToHelpSellShareId"></canvas>
  </view>
</template>
<script>
// 使用参数案例
// this.canvasData = { // 邀请帮卖图片绘制
//   userAvatar: 'https://image.qqpyyds.com/user/avatar/1448144136114941954', // 用户头像
//   userNickname: '廖志林',  // 用户昵称
//   title: '团长个性签名，最多一行最多团长个性签名，最多一行最多', // 标题
//   type: 1, // 1邀请成为帮卖 2主页分享卡片 3关注
//   // tyep==1参数
//   fansMun: '1.2w', // 粉丝数
//   fansText: '粉丝数', // 粉丝数
//   followGroupMun: '3345', // 跟团人次
//   followGroupText: '跟团人次', // 跟团人次
//   btnText: '立即加入', // 按钮文案
//   // tyep==1参数
//   // tyep==3参数
//   memberMun: '1.2w', // 团成员
//   memberText: '团成员', // 团成员
//   highQualityMun: '345', // 优质团购
//   highQualityText: '优质团购', // 优质团购
//   btnText: '马上关注', // 按钮文案
//   // tyep==3参数
//   // tyep==2参数
//   fansMun: '1.2w', // 粉丝数
//   fansText: '粉丝数', // 粉丝数
//   videosMun: '332', // 视频数
//   videosText: '视频数', // 视频数
//   highQualityMun: '345', // 优质团购
//   highQualityText: '优质团购',
//   watchMun: '3345w', // 观看人次
//   watchText: '观看人次', // 观看人次
//   btnText: '马上关注', // 按钮文案
//   // tyep==2参数
// }
// this.$refs.childInviteToHelpSellShare.shareFrends(this.canvasData)
export default {
  data () {
    return {
      myCanvasWidth: 240,
      myCanvasHeight: 192,
      dpiMun: 3,
    }
  },
  created () {
    this.myCanvasWidth = this.myCanvasWidth*this.dpiMun
    this.myCanvasHeight = this.myCanvasHeight*this.dpiMun
  },
  methods: {
    async shareFrends (data, from) {
      let isLoadType = data.isLoadType
      if (!isLoadType) {
        wx.showLoading({
          title: '生成中...',
          mask: true
        })
      }
      const _this = this
      await _this.createdCode(data)
      let from_ = from
      let shareData = {}
      wx.canvasToTempFilePath({
        canvasId: 'inviteToHelpSellShareId',
        fileType: 'jpg',
        width: _this.myCanvasWidth,
        height: _this.myCanvasHeight,
        destWidth: _this.myCanvasWidth * 2,
        destHeight: _this.myCanvasHeight * 2,
        success: async (res) => {
          shareData = {
            code: '200',
            msg: '绘制成功！',
            url: res.tempFilePath
          }
          // _this.$store.commit('OPEN_GROUP_SHARE_DATA', shareData)
          if (shareData.code == 200) {
            _this.$emit('shareSuccess', shareData)
          }
          // console.log(shareData,'绘制成功')
          wx.hideLoading()
        },
        fail: function (res) {
          console.log('绘制失败')
          wx.hideLoading()
        }
      },_this)
    },
    // 开始绘图
    createdCode (data) {
      // console.log(data, 121212)
      const _this = this
      let fromData = data
      return new Promise(resolve => {
        exec()
        async function exec () {
          const ctx = wx.createCanvasContext('inviteToHelpSellShareId', _this) // 绘图上下文
          ctx.setFillStyle('#ffffff')
          ctx.fillRect(0, 0, _this.myCanvasWidth, _this.myCanvasHeight)
          ctx.save()
          _this.handleBorderRect(ctx, 0, 0, _this.myCanvasWidth, _this.myCanvasHeight, 4*_this.dpiMun, '#F2F3F5')
          ctx.clip()
          ctx.restore()
          ctx.save()
          ctx.beginPath()
          ctx.strokeStyle = '#fff'
          ctx.arc(34*_this.dpiMun,34*_this.dpiMun,24*_this.dpiMun,0,2*Math.PI)
          ctx.fill()
          ctx.clip()
          await _this.drawImg(fromData.userAvatar, ctx, 10*_this.dpiMun, 10*_this.dpiMun, 48*_this.dpiMun, 48*_this.dpiMun)
          ctx.restore()
          let userNicknameStr = fromData.userNickname.length>16?fromData.userNickname.slice(0,15)+'...':fromData.userNickname
          ctx.setFontSize(16*_this.dpiMun)
          ctx.setFillStyle('#000')
          ctx.fillText(userNicknameStr, 66*_this.dpiMun, 28*_this.dpiMun, 168*_this.dpiMun)
          if (fromData.title) {
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#323232')
            let titleStr = fromData.title.length>14?fromData.title.slice(0,13)+'...':fromData.title
            ctx.fillText(titleStr, 66*_this.dpiMun, 50*_this.dpiMun, 168*_this.dpiMun)
          }
          let multiple = fromData.type==2?6:4
          let coordinateX = _this.myCanvasWidth/multiple
          let halfW = _this.myCanvasWidth/2
          if (fromData.type==1) {
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            ctx.fillText(fromData.fansMun, coordinateX-(ctx.measureText(fromData.fansMun.toString()).width/2), 92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.fansText, coordinateX-(ctx.measureText(fromData.fansText).width/2), 112*_this.dpiMun, halfW)
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            ctx.fillText(fromData.followGroupMun, coordinateX-(ctx.measureText(fromData.followGroupMun.toString()).width/2)+halfW, 92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.followGroupText, coordinateX-(ctx.measureText(fromData.followGroupText).width/2)+halfW, 112*_this.dpiMun, halfW)
          }
          if (fromData.type==2) {
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            // 帮卖介绍--只有两项时需要大概居中
            let xfansMun = 0
            if (!fromData.highQualityText) xfansMun = 90
            ctx.fillText(fromData.fansMun, coordinateX-(ctx.measureText(fromData.fansMun.toString()).width/2) + xfansMun, 92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.fansText, coordinateX-(ctx.measureText(fromData.fansText).width/2) + xfansMun, 112*_this.dpiMun, halfW)
            if (fromData.videosMun) {
              ctx.setFontSize(18*_this.dpiMun)
              ctx.setFillStyle('#323232')
              ctx.fillText(fromData.videosMun, coordinateX-(ctx.measureText(fromData.videosMun.toString()).width/2)+(_this.myCanvasWidth/3), 92*_this.dpiMun, halfW)
              ctx.setFontSize(12*_this.dpiMun)
              ctx.setFillStyle('#969799')
              ctx.fillText(fromData.videosText, coordinateX-(ctx.measureText(fromData.videosText).width/2)+(_this.myCanvasWidth/3), 112*_this.dpiMun, halfW)
            }
            if (fromData.highQualityText) {
              ctx.setFontSize(18*_this.dpiMun)
              ctx.setFillStyle('#323232')
              console.log(ctx.measureText(fromData.highQualityMun))
              ctx.fillText(fromData.highQualityMun, coordinateX-(ctx.measureText(fromData.highQualityMun.toString()).width/2)+(_this.myCanvasWidth/3), 92*_this.dpiMun, halfW)
              ctx.setFontSize(12*_this.dpiMun)
              ctx.setFillStyle('#969799')
              ctx.fillText(fromData.highQualityText, coordinateX-(ctx.measureText(fromData.highQualityText).width/2)+(_this.myCanvasWidth/3), 112*_this.dpiMun, halfW)
            }
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            ctx.fillText(fromData.watchMun, coordinateX-(ctx.measureText(fromData.watchMun.toString()).width/2)+(_this.myCanvasWidth/3*2) - xfansMun,  92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.watchText, coordinateX-(ctx.measureText(fromData.watchText).width/2)+(_this.myCanvasWidth/3*2) - xfansMun, 112*_this.dpiMun, halfW)
          }
          if (fromData.type==3) {
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            ctx.fillText(fromData.memberMun, coordinateX-(ctx.measureText(fromData.memberMun.toString()).width/2), 92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.memberText, coordinateX-(ctx.measureText(fromData.memberText).width/2), 112*_this.dpiMun, halfW)
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#323232')
            ctx.fillText(fromData.highQualityMun, coordinateX-(ctx.measureText(fromData.highQualityMun.toString()).width/2)+halfW, 92*_this.dpiMun, halfW)
            ctx.setFontSize(12*_this.dpiMun)
            ctx.setFillStyle('#969799')
            ctx.fillText(fromData.highQualityText, coordinateX-(ctx.measureText(fromData.highQualityText).width/2)+halfW, 112*_this.dpiMun, halfW)
            ctx.save()
          }
          await _this.drawImg('https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/share_name_bg2.png', ctx, 8*_this.dpiMun, 126*_this.dpiMun, 224*_this.dpiMun, 64*_this.dpiMun)
          ctx.restore()
          ctx.save()
          if (fromData.btnText) {
            ctx.setFontSize(18*_this.dpiMun)
            ctx.setFillStyle('#fff')
            ctx.fillText(fromData.btnText, halfW-(ctx.measureText(fromData.btnText).width/2), _this.myCanvasHeight-(28*_this.dpiMun), 220*_this.dpiMun)
          }
          ctx.restore()
          ctx.draw(false, () => {
            resolve()
          })
        }
      })
    },
    // 画4个圆角
    handleBorderRect (ctx, x, y, w, h, r, color) {
      ctx.beginPath()
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI)
      ctx.moveTo(x + r, y)
      ctx.lineTo(x + w - r, y)
      ctx.lineTo(x + w, y + r)
      // 右上角
      ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI)
      ctx.lineTo(x + w, y + h - r)
      ctx.lineTo(x + w - r, y + h)
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
      ctx.lineTo(x + r, y + h)
      ctx.lineTo(x, y + h - r)
      // 左下角
      ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI)
      ctx.lineTo(x, y + r)
      ctx.lineTo(x + r, y)
      ctx.fillStyle = color
      ctx.fill()
      ctx.closePath()
    },
    // 文字自动换行
    wordsWrap (ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
      let lineWidth = 0
      let lastSubStrIndex = 0
      for (let i = 0; i < name.length; i++) {
        lineWidth += ctx.measureText(name[i]).width
        if (lineWidth > maxWidth) {
          ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY)
          srartY += wordsHight
          lineWidth = 0
          lastSubStrIndex = i
        }
        if (i === name.length - 1) {
          ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY)
        }
      }
    },
    // 绘制远程网络图片
    async drawImg (url, ctx, startX, startY, width, height) {
      let _this = this
      return new Promise(resolve => {
        exec()
        async function exec () {
          wx.getImageInfo({
            src: url,
            success: function (res) {
              const filePath = res.path
              ctx.drawImage(filePath, startX, startY, width, height)
              resolve()
            },
            fail: function (err) {
              console.log(err)
            },
            complete: function (err) {
              console.log(err)
            }
          })
        }
      })
    }
  },
}
</script>
<style scoped lang="scss">
.share_layout_box {
  position: fixed;
  left: -1000px;
  top: -1000px;
  // z-index: 999;
}
</style>